<!-- subpkg_medicine/payment/payment.vue -->
<script lang="ts" setup>
  import { getConsultOrderPayUrlAPI } from '@/api/consult'
  import { createOrderAPI, getAddressListAPI, getPreOrderAPI } from '@/api/medicine'
  import type { Address, OrderPre } from '@/types/medicine'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  //地址列表
  const addressList = ref({} as Address)
  //处方药单列表
  const medicines = ref({} as OrderPre)
  //获取地址列表
  onLoad(async () => {
    const res = await getAddressListAPI()
    addressList.value = res.find((item) => item.isDefault === 1)!
  })
  let medicineId = ''
  //获取处方药品列表
  onLoad(async (params) => {
    const res = await getPreOrderAPI(params?.id)
    medicineId = params?.id
    medicines.value = res
  })

  //定义一个变量，控制支付弹层的显示
  const isShow = ref(false)
  //定义一个变量接收订单id
  let orderId = ''
  //生成订单id
  const onPayment = async () => {
    const res = await createOrderAPI(medicineId, addressList.value.id)
    orderId = res.id
    //打开支付弹层
    isShow.value = true
  }
  //开始支付
  const onPay = async (channelIndex: number) => {
    if (channelIndex === 0) {
      uni.showToast({ title: '暂不支持微信支付' })
      return
    }
    const res = await getConsultOrderPayUrlAPI({
      orderId: orderId,
      paymentMethod: channelIndex + '',
      payCallback: `http://localhost:5173/#/subpkg_medicine/pay_result/pay_result?orderId=${orderId}`,
    })
    //关闭支付弹层,跳转支付页面
    isShow.value = false
    window.location.href = res.payUrl
  }
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressList.city }}{{ addressList.county }}
          </view>
          <view class="detail">{{ addressList.addressDetail }}</view>
          <view class="receiver">{{ addressList.receiver }} {{ addressList.mobile }}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <template v-for="(item, index) in medicines.medicines" :key="item.id">
          <view class="medicine-list-item">
            <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
            <view class="medicine-info">
              <text class="name">{{ item.name }}</text>
              <text class="unit symbol">{{ item.specs }}</text>
              <text class="price">¥{{ item.amount }}</text>
            </view>
            <view class="quantity">x{{ item.quantity }}</view>
            <view class="guide">{{ item.usageDosag }}</view>
          </view>
        </template>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${medicines.payment}`" />
          <uni-list-item title="运费" :right-text="`¥${medicines.expressFee}`" />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥${medicines.couponDeduction}`" />
          <uni-list-item title="实付款" :right-text="`-¥${medicines.actualPayment}`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ medicines.actualPayment }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="onPayment">立即支付</button>
        </view>
      </view>

      <custom-payment
        :amount="medicines.actualPayment"
        :show="isShow"
        @on-close="isShow = false"
        @on-pay="onPay"
      />
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './payment.scss';
</style>
